<template>
    <el-menu
      :default-active="activeMenu"
      mode="horizontal"
      @select="handleMenuSelect"
    >
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/shop">商城</el-menu-item>
      <el-menu-item index="/edu">农教</el-menu-item>
      <el-menu-item index="/community">社区</el-menu-item>
    </el-menu>
  </template>
  
  <script setup>
  import { ref, watch } from 'vue'
  import { useRoute } from 'vue-router'
  
  const route = useRoute()
  const activeMenu = ref(route.path)
  
  watch(
    () => route.path,
    (newPath) => {
      activeMenu.value = newPath
    }
  )
  
 // const handleMenuSelect = (key: string) => {
//     if (key === '/') {
//       window.location.href = '/'
//     } else {
//       router.push(key)
//     }
//   }
  </script>
  
  <style scoped>
  .el-menu {
    border-bottom: none;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  }
  </style>